<!-- 新增/编辑短剧分类-->
<template>
    <div class="user-tag-edit">
        <!-- 导航头部 -->
        <div class="ls-card">
            <el-page-header @back="$router.go(-1)" :content="mode === 'add' ? '新增短剧分类' : '编辑短剧分类'" />
        </div>

        <!-- 主要内容 -->
        <el-form :rules="formRules" ref="formRef" :model="form" label-width="120px" size="small">
            <div class="ls-card m-t-16">
                <div class="card-title">分类信息</div>
                <div class="card-content m-t-24">
                    <el-form-item label="分类名称" prop="category_name">
                        <el-input v-model="form.category_name" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="分类描述" prop="remark">
                        <el-input
                            class="ls-input-textarea"
                            v-model="form.remark"
                            placeholder="请输入分类描述"
                            type="textarea"
                            :rows="3"
                        >
                        </el-input>
                    </el-form-item> -->
                </div>
            </div>
        </el-form>

        <!-- 底部保存或取消 -->
        <div class="bg-white ls-fixed-footer">
            <div class="row-center flex" style="height: 100%">
                <el-button size="small" @click="$router.go(-1)">取消</el-button>
                <el-button size="small" type="primary" @click="onSubmit()">保存</el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { PageMode } from '@/utils/type'
import { detailvideoClassification, modifyvideoClassification,addvideoClassification } from '@/api/visionapi/type'
// import { CategoryAdd_Req, CategoryEdit_Req, CategoryDetail_Res } from '@/api/visionapi/type.d.ts'
@Component({
    components: {}
})
export default class TagEdit extends Vue {
    // /** S Data **/
    mode: string = PageMode.ADD // 当前页面【add: 添加用户等级 | edit: 编辑用户等级】
    identity: number | null = null // 当前编辑用户的身份ID  valid: mode = 'edit'
    form = {
        category_name: '', // 名称
        is_show:1,
        type:3,
    }

    formRules = {
        category_name: [
            {
                required: true,
                message: '请输入分类名称',
                trigger: 'blur'
            }
        ]
    }
    $refs!: {
        formRef: any
    }
    /** E Data **/

    /** S Methods **/
    // 表单提交
    onSubmit() {
        // 验证表单格式是否正确
        this.$refs.formRef.validate((valid: boolean): any => {
            if (!valid) {
                return
            }

            // 请求发送
            switch (this.mode) {
                case PageMode.ADD:
                    return this.handleUserLabelAdd()
                case PageMode.EDIT:
                    return this.handleUserLabelEdit()
            }
        })
    }

    // 新增用户等级
    handleUserLabelAdd() {
        const form = this.form 
        addvideoClassification(form)
            .then(() => {
                // this.$message.success('添加成功!')
                setTimeout(() => this.$router.go(-1), 500)
            })
            .catch(() => {
                // this.$message.error('保存失败!')
            })
    }

    // 编辑用户等级
    handleUserLabelEdit() {
        const params = this.form
        const id: number = this.identity as number
        modifyvideoClassification({ ...params, id })
            .then(() => {
                // this.$message.success('修改成功!')
                setTimeout(() => this.$router.go(-1), 500)
                //this.initFormDataForUserLabelEdit()
            })
            .catch(() => {
                // this.$message.error('保存失败!')
            })
    }
    // 表单初始化数据 [编辑模式] mode => edit
    initFormDataForUserLabelEdit() {
        detailvideoClassification({
            id: this.identity
        })
            .then((res) => {
                Object.keys(res).map(key => {
                    this.$set(this.form, key, res[key])
                })
            })
            .catch(() => {
                // this.$message.error('数据初始化失败，请刷新重载！')
            })
    }
    /** E Methods **/

    /** S Life Cycle **/
    created() {
        const query: any = this.$route.query

        if (query.mode) {
            this.mode = query.mode
        }

        // 编辑模式：初始化数据
        if (this.mode === PageMode.EDIT) {
            this.identity = query.id * 1
            this.initFormDataForUserLabelEdit()
        }
    }

    /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
.ls-card {
    .ls-input {
        width: 133px;
    }

    .ls-input-textarea {
        width: 300px;
    }

    .card-title {
        font-size: 14px;
        font-weight: 500;
    }
}

.user-tag-edit {
    min-height: calc(100vh - #{$--header-height} - 92px);
    margin-bottom: 60px;

    &__header {
        flex: none;
    }
}
</style>
